component.widget-chat

widget-chat

Chat

Martin
just now

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae accumsan mauris. Donec vitae nibh felis, facilisis bibendum sapien.

John Doe
15 seconds ago

In ultricies ante eget tortor euismod vitae molestie eros hendrerit. Cras tristique, orci ac lacinia aliquet, velit risus laoreet lectus, eget sollicitudin metus orci non nulla.

Ricky
5 minutes ago

Pellentesque ac turpis turpis. Aliquam erat volutpat. Proin semper auctor mauris vel tempor. Ut eget turpis neque. Nam ultricies tortor eu odio ultricies euismod.

<!-- Chat -->
<div class="widget widget-inverse widget-chat" data-builder-exclude>

	<div class="widget-head">
		<h4 class="heading"><i class="icon-comment-fill-1"></i> Chat</h3>
	</div>
	<div class="widget-body padding-none border-bottom">
	
	<!-- Slim Scroll -->
	<div class="slim-scroll chat-items" data-scroll-height="235px" data-scroll-size="0">
		
		<!-- Media item -->
		<div class="media innerAll border-bottom">
			<small class="author"><a href="#" title="" class="strong">Martin</a></small>
			<img src="../assets/images/people/50/2.jpg" alt="" class="img-circle media-object pull-left">
			<div class="media-body">
				<small class="date"><cite>just now</cite></small>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae accumsan mauris. Donec vitae nibh felis, facilisis bibendum sapien.</p>
			</div>
		</div>
		<!-- // Media item END -->
		
		<!-- Media item -->
		<div class="media innerAll border-bottom right">
			<small class="author"><a href="#" title="" class="strong">John Doe</a></small>
		    <img src="../assets/images/people/50/5.jpg" alt="" class="img-circle media-object pull-right" > 
			<div class="media-body">
				<small class="date"><cite>15 seconds ago</cite></small>
				<p>In ultricies ante eget tortor euismod vitae molestie eros hendrerit. Cras tristique, orci ac lacinia aliquet, velit risus laoreet lectus, eget sollicitudin metus orci non nulla.</p>
			</div>
		</div>
		<!-- // Media item END -->
		
		<!-- Media item -->
		<div class="media innerAll">
			<small class="author"><a href="#" title="" class="strong">Ricky</a></small>
		    <img src="../assets/images/people/50/7.jpg" alt="" class="img-circle media-object pull-left" > 
			<div class="media-body">
				<small class="date"><cite>5 minutes ago</cite></small>
				<p>Pellentesque ac turpis turpis. Aliquam erat volutpat. Proin semper auctor mauris vel tempor. Ut eget turpis neque. Nam ultricies tortor eu odio ultricies euismod.</p>
			</div>
		</div>
		<!-- // Media item END -->
		
	</div>
	<!-- // Slim Scroll END -->
	
	</div>
	
	<div class="chat-controls bg-default innerAll half">
		<div class="">
			<form class="margin-none">
				<div class="input-group">
					<input type="text" name="message" class="form-control" placeholder="Type your message .." />
					<div class="input-group-btn">
						<a type="submit" class="btn btn-primary"><i class="fa fa-comments-o"></i></a>
					</div>
				</div>
			</form>
		</div>
	</div>
	
</div>
<!-- // Chat END -->


Code

@import "assets/components/modules/admin/widgets/widget-chat/assets/less/widget-chat.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/forms.less";
@import "http://localhost/shared/components/library/jquery-ui/css/jquery-ui.min.css";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

HEAD You should include the following scripts in the head section of the document, right before the closing </head> tag, after styles.

<script src="assets/components/library/jquery-ui/js/jquery-ui.min.js?v=v1.2.3"></script>
<script src="assets/components/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js?v=v1.2.3"></script>

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/widgets/widget-chat/assets/js/widget-chat.js?v=v1.2.3"></script>
<script src="assets/components/plugins/slimscroll/jquery.slimscroll.js?v=v1.2.3"></script>